import React, { useEffect, useState } from 'react';
import '@/views/Index/Echarts/Echarts.scss'
import { useNavigate } from "react-router-dom";
import Nav from '../../../components/Nav/Nav'
import service from '../../../api/index'
import * as echarts from 'echarts';
import { data_listK } from '../../../api/data';
interface Props {

}

function Echarts(props: Props) {

    let [list, setDataList] = useState([])
    let [listK, setDataListK] = useState([])


    let myChart: any = null

    useEffect(() => {
        // datalistK()
        datalist()

        // 基于准备好的dom，初始化echarts实例
        myChart = echarts.init(document.getElementById('main') || document.body);

        
    }, [])

    let datalistK = async () => {
        let res = await service.data.data_listK()
        console.log(res);
    }
    let datalist = async () => {
        let res = await service.data.data_list()
        // console.log(res.data.data);
        let x=res.data.data.map((item:any)=>{
            return item.x
        })
        let val=res.data.data.map((item:any)=>{
            return item.val
        })      
        draw(x,val)
    }


    let draw = (x:any,val:any) => {
        // 绘制图表
        myChart.setOption({
            title: {
                text: 'ECharts 入门示例'
            },
            legend: {
                data: ['饼图', '销量', '价格']
            },
            xAxis: {
                data: x
            },
            yAxis: {
                min: 0,
                max: 300,
                splitNumber: 7,
            },
            series: [
                {
                    name: '饼图',
                    type: 'pie',
                    radius: [40, 180],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: [
                        { value: 24, name: '星期一' },
                        { value: 34, name: '星期二' },
                        { value: 33, name: '星期三' },
                        { value: 32, name: '星期四' },
                        { value: 22, name: '星期五' },
                        { value: 24, name: '星期六' },
                        { value: 40, name: '星期七' },
                    ]
                },
                {
                    // 数据名字
                    name: '销量',
                    // 数据data展示的类型type：柱状图bar/折线line/饼状图pie 使用饼状图时需要删掉坐标轴
                    type: 'line',
                    data: val,
                    // data: [150, 230, 225, 220, 130, 148, 265],

                    // 圆点的形状:空心圆/方形square/实心圆circle
                    symbol: 'emptycircle',

                    // 折线的样式
                    itemStyle: {
                        normal: {
                            // 线以及实心圆点的颜色
                            color: 'green',
                        }
                    }
                },
                {
                    // 数据名字
                    name: '价格',
                    // 柱状图的宽度
                    barWiidth: 50,
                    // 让背景色显示
                    showBackground: false,
                    // 柱状图的颜色
                    color: 'orange',
                    // 数据data展示的类型type：柱状图bar/折线line/饼状图pie 使用饼状图时需要删掉坐标轴
                    type: 'bar',
                    data: [0, 0, 10, 0, 0, 0, 10]
                }
            ]
        });
    }


    return (
        <div className='echarts'>
            <Nav />
            <div className="list">
                <div id="main"></div>
            </div>

        </div>
    );
}

export default Echarts;